<template>
  <div>
    <div
      v-for="item in treeData"
      :key="item.id"
    >
      <div
        :class="['background-container', item.data.innerChange ? 'inner_change' : '']"
        :style="{ backgroundColor: colorConfigMap[item.data.status] }"
      ></div>
      <MergeTreeBackground
        v-show="item.expand"
        :tree-data="item.children"
      ></MergeTreeBackground>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { MTreeNode } from "@/common/Tree/MTreeNode";
import { MergeModelData } from "./logic";

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const props = defineProps<{
  treeData: MTreeNode<MergeModelData>[];
}>();
const colorConfigMap = {
  ADD: "#CFE5AB",
  DELETE: "#FCD3D8",
  MODIFIED: "#C5E2FD"
};
</script>
<style lang="scss" scoped>
.background-container {
  width: 100%;
  height: 18px;
}
.inner_change {
  background-image: url(/statics/icons/projectMerge/slashBg.png);
  background-size: 9px 9px;
  background-repeat: repeat;
}
</style>
